<template>
  <view class="message-list-page">
    <view
      class="message-list-item"
      v-for="item in messageList"
      :key="item.id"
      @click="goDetail(item)"
    >
      <image
        class="message-list-icon"
        :src="item.icon"
        mode="aspectFill"
      />
      <view class="message-list-content">
        <view class="message-list-title-row">
          <view class="message-list-title">{{ item.title }}</view>
          <view class="message-list-time">{{ item.time }}</view>
          <view
            v-if="!item.status"
            class="message-list-dot"
          ></view>
        </view>
        <!-- <view class="message-list-desc">
          <view class="message-list-desc-text">{{ item.desc }}</view>
          <view
            v-if="!item.status"
            class="message-list-dot"
          ></view>
        </view> -->
      </view>
    </view>
    <TabBar active="message" />
  </view>
</template>

<script>
  import TabBar from '../../components/TabBar.vue'
  import { selectMessageNoticeList } from '../../api/message.js'
  export default {
    components: { TabBar },
    data() {
      return {
        messageList: [],
        iconMap: {
          1: '/static/icon/message_system_icon.png',
          2: '/static/icon/message_service_icon.png',
          3: '/static/icon/message_ca_icon.png'
        },
        openId: ''
      }
    },
    onLoad() {},
    onShow() {
      wx.hideHomeButton({
        complete: () => {
          console.log('99999')
        }
      })
      console.log('onShow')
      this.load()
    },
    methods: {
      goDetail(item) {
        uni.navigateTo({ url: `/pages/message/detail?id=${item.id}` })
      },
      async load() {
        try {
          const user = uni.getStorageSync('user')
          const openId = user.openId
          const res = await selectMessageNoticeList({ openId })
          if (res.code === 200 && Array.isArray(res.data)) {
            this.messageList = res.data.map((item) => ({
              id: item.id,
              icon: this.iconMap[Number(item.messageType)],
              title: item.title,
              desc: item.remark,
              time: item.createTime,
              status: item.status
            }))
          }
        } catch (e) {
          console.log('e: ', e)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .message-list-page {
    background: #f5f6fa;
    min-height: 100vh;
    border-top: 1rpx solid #eaeaea;
  }
  .message-list-item {
    height: 190rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    position: relative;
    padding: 0 32rpx;
    border-bottom: 1rpx solid #eaeaea;
  }
  .message-list-icon {
    width: 88rpx;
    height: 88rpx;
    margin-right: 24rpx;
    border-radius: 50%;
    background: #eee;
  }
  .message-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .message-list-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 10rpx; */
  }
  .message-list-title {
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message-list-time {
    font-size: 24rpx;
    color: #999999;
    margin-left: 16rpx;
    flex-shrink: 0;
  }
  .message-list-desc {
    font-size: 24rpx;
    color: #999999;
    line-height: 1.5;
    margin-top: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .message-list-dot {
    width: 16rpx;
    height: 16rpx;
    background: #fa4b6e;
    border-radius: 50%;
  }
  .message-list-desc-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
